<template>
  <section>
    <div class="history">
      <div class="title">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="clearHistory" />
      </div>
      <div class="box">
        <van-tag plain v-for="item in historyarr" :key="item"
        @click="chilckhistory(item)"
        >{{item}}</van-tag>
      </div>
    </div>
    <div class="history">
      <div class="title">
        <h4>热门搜索</h4>
      </div>
      <div class="box">
        <van-tag plain :class="item.is_hot==1 ? 'active' : ''" v-for="(item, index) in hotarr" :key="index"
        @click="chilckhistory(item.keyword)"
        >{{item.keyword}}</van-tag>
      </div>
    </div>
  </section>
</template>

<script>
import {ClearHistory} from '@/request/api'
export default {
  props: ["historyarr", "hotarr"],
  methods: {
    clearHistory(){
      ClearHistory()
        .then(res=>{
          if(res.errno == 0){
            this.$toast.success('删除成功');
          }
        })
    },
    chilckhistory(item) {
      this.$store.dispatch("AsyncChangeProductArr", { keyword: item });
      this.$emit("setneiku", 3);
    }
  }
};
</script>

<style lang="less" scoped>
section {
  .history {
    background: #fff;
    padding: 0 5% 4px;
    margin-bottom: 20px;
  }
  .title {
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    h4 {
      float: left;
      margin: 0;
      font-weight: normal;
    }
    .van-icon {
      float: right;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .box{
    .van-tag{
      margin-right: 5px;
      margin-bottom: 5px;
      font-size: 14px;
      &.active{
        color: red;
      }
    }
  }
}
</style>